<template>
  <!-- 新闻卡片容器，通过isTop区分样式 -->
  <view class="news-card" :class="{ 'top-card': isTop }">
    <!-- 置顶标识，仅当isTop为true时显示 -->
    <view class="top-tag" v-if="isTop">置顶</view>
    <!-- 新闻标题 -->
    <view class="news-title">{{ title }}</view>
    <!-- 新闻内容 -->
    <view class="news-content">{{ content }}</view>
    <!-- 新闻发布时间 -->
    <view class="news-time">{{ time }}</view>
  </view>
</template>

<script>
export default {
  // 定义组件接收的属性：新闻标题、内容、时间、是否置顶
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      required: true
    },
    time: {
      type: String,
      required: true
    },
    isTop: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 可添加点击事件（如跳转到新闻详情），这里示例仅打印
    onCardClick() {
      console.log('新闻卡片被点击', this.title);
    }
  }
};
</script>

<style scoped>
/* 通用新闻卡片样式 */
.news-card {
  width: 90%;
  margin: 10rpx auto;
  padding: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 置顶新闻卡片的特殊样式 */
.top-card {
  background-color: #fff8e8;
  border-left: 8rpx solid #ffc107;
}

/* 置顶标识样式 */
.top-tag {
  display: inline-block;
  padding: 2rpx 10rpx;
  background-color: #ffc107;
  color: #fff;
  font-size: 24rpx;
  border-radius: 4rpx;
  margin-bottom: 10rpx;
}

/* 新闻标题样式 */
.news-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

/* 新闻内容样式 */
.news-content {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
  line-height: 1.5;
}

/* 新闻时间样式 */
.news-time {
  font-size: 24rpx;
  color: #999;
  text-align: right;
}
</style>